/**
 * @author lulongwen
 * Date: 2023-09-01 21:21
 * Description: 自定义节点，不能获取 nodes下全部的属性，丢失 width, height 及自定义属性
 * https://reactflow.dev/docs/api/nodes/custom-nodes/
 */

// import { memo, useState } from 'react';
import ResizableNode from '../ResizableNode';
import {
  RoundRectangle,
  Circle,
  ArrowRectangle,
  Database,
  Diamond,
  Ellipse,
  Hexagon,
  Parallelogram,
  Triangle,
} from '../../shapes';

type IProps = {
  width: number;
  height: number;
  selected?: boolean;
}

// 矩形 Rectangle
export const ResizableRoundRectangle = (props: any) => {
  return (
    <ResizableNode {...props}>
      {(resize: IProps) => <RoundRectangle {...resize} />}
    </ResizableNode>
  );
};

// 菱形 Diamond
export const ResizableDiamond = (props: any) => {
  console.log('菱形', props)
  return (
    <ResizableNode {...props}>
      {(resize: IProps) => <Diamond {...resize} />}
    </ResizableNode>
  );
};

// 箭头矩形 ArrowRectangle
export const ResizableArrowRectangle = (props: any) => {
  return (
    <ResizableNode {...props}>
      {(resize: IProps) => <ArrowRectangle {...resize} />}
    </ResizableNode>
  );
};

// 圆形 Circle
export const ResizableCircle = (props: any) => {
  return (
    <ResizableNode {...props}>
      {(resize: IProps) => <Circle {...resize} />}
    </ResizableNode>
  );
};

// 椭圆 Ellipse
export const ResizableEllipse = (props: any) => {
  return (
    <ResizableNode {...props}>
      {(resize: IProps) => <Ellipse {...resize} />}
    </ResizableNode>
  );
};

// 圆柱形 Database
export const ResizableDatabase = (props: any) => {
  return (
    <ResizableNode {...props}>
      {(resize: IProps) => <Database {...resize} />}
    </ResizableNode>
  );
};

// 六边形 Hexagon
export const ResizableHexagon = (props: any) => {
  return (
    <ResizableNode {...props}>
      {(resize: IProps) => <Hexagon {...resize} />}
    </ResizableNode>
  );
};

// 三角形 Triangle
export const ResizableTriangle = (props: any) => {
  return (
    <ResizableNode {...props}>
      {(resize: IProps) => <Triangle {...resize} />}
    </ResizableNode>
  );
};

// 平行四边形 Parallelogram
export const ResizableParallelogram = (props: any) => {
  return (
    <ResizableNode {...props}>
      {(resize: IProps) => <Parallelogram {...resize} />}
    </ResizableNode>
  );
};
